<template>
  <div class="wrap">
    <div class="header">
      <i class="wyy wyy-yuanquan"></i>
      <span>榜单</span>
      <span class="more">
        更多<i class="wyy wyy-jiantou"></i>
      </span>
    </div>
    <el-row class="container">
      <el-col :span="8">
        <ul class="up">
          <li class="top">
            <div class="img_box">
              <img src="http://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100" alt="">
            </div>
            <div class="text_box">
              <p>飙升榜</p>
              <span class="bofang"><i class="wyy wyy-bofang1"></i></span>
              <span class="shoucang"><i class="wyy wyy-jiatianjiawenjian"></i></span>
            </div>
          </li>
          <li v-for="(item, index) in upList" :key="item.id">
            <span class="num">{{ index + 1 }}</span>
            <span><a href="#" @click.prevent="$router.push(`/song/${item.id}`)">{{ item.name }}</a></span>
          </li>
          <li><a class="more" @click.prevent="$router.push('/rank/19723756')">查看全部></a></li>
        </ul>
      </el-col>
      <el-col :span="8">
        <ul class="new">
          <li class="top">
            <div class="img_box">
              <img src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100" alt="">
            </div>
            <div class="text_box">
              <p>新歌榜</p>
              <span class="bofang"><i class="wyy wyy-bofang1"></i></span>
              <span class="shoucang"><i class="wyy wyy-jiatianjiawenjian"></i></span>
            </div>
          </li>
          <li v-for="(item, index) in newList" :key="item.id">
            <span class="num">{{ index + 1 }}</span>
            <span><a href="#">{{ item.name }}</a></span>
          </li>
          <li><a class="more" @click="$router.push('/rank/3779629')">查看全部></a></li>
        </ul>
      </el-col>
      <el-col :span="8">
        <ul class="original">
          <li class="top">
            <div class="img_box">
              <img src="http://p3.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100" alt="">
            </div>
            <div class="text_box">
              <p>原创榜</p>
              <span class="bofang"><i class="wyy wyy-bofang1"></i></span>
              <span class="shoucang"><i class="wyy wyy-jiatianjiawenjian"></i></span>
            </div>
          </li>
          <li v-for="(item, index) in originalList" :key="item.id">
            <span class="num">{{ index + 1 }}</span>
            <span><a href="#">{{ item.name }}</a></span>
          </li>
          <li><a class="more" @click="$router.push('/rank/2884035')">查看全部></a></li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDetailMusicById } from '@/api/RankingList'
export default {
  name: 'BangDan',
  data () {
    return {
      upList: [],
      newList: [],
      originalList: []
    }
  },
  created () {
    this.getDetailMusicById()
  },
  methods: {
    async getDetailMusicById () {
      const data1 = await getDetailMusicById({
        id: 19723756
      })
      this.upList = data1.data.playlist.tracks.slice(0, 10)
      const data2 = await getDetailMusicById({
        id: 3779629
      })
      this.newList = data2.data.playlist.tracks.slice(0, 10)
      const data3 = await getDetailMusicById({
        id: 2884035
      })
      this.originalList = data3.data.playlist.tracks.slice(0, 10)
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 0 20px;
  margin: 22px 0 30px 0;
  .header {
    border-bottom: 4px solid #C10D0C;
    .wyy-yuanquan {
      color: #C10D0C;
    }
    span {
      margin-left: 10px;
      font-size: 20px;
      color: #333;
    }
    ul {
      margin-left: 20px;
      font-size: 12px;
      color: #666;
      display: inline-block;
      li {
        display: inline-block;
        border: 0;
      }
      span {
        font-size: 12px;
        color: #666;
        margin: 0 8px;
      }
    }
    .more {
      margin-top: 10px;
      float: right;
      font-size: 12px;
      color: #666;
      i {
        color: #C10D0C;
        font-weight: 600;
        vertical-align: middle;
      }
    }
  }
  .container {
    margin-top: 20px;
    border-block: 1px solid #F4F4F4;
    ul {
      .top {
        height: 120px;
        padding: 20px;
        .img_box {
          float: left;
          box-shadow: 3px 5px 5px #656B79;
          img {
            width: 80px;
            height: 80px;
          }
        }
        .text_box {
          color: #000;
          margin-left: 10px;
          font-size: 14px;
          float: left;
          p {
            margin-bottom: 10px;
            font-weight: bold;
          }
          span {
            color: #999;
            margin-right: 10px;
            .wyy {
              font-size: 22px;
            }
          }
          span:hover {
            color: #666;
          }
        }
      }
      li {
        font-size: 12px;
        color: #000;
        padding-left: 12px;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
        .num {
          color: #666;
          display: inline-block;
          width: 35px;
          text-align: center;
          font-size: 16px;
        }
        a {
          color: #000;
        }
        a:hover {
          color: #000;
          text-decoration: underline;
        }
      }
      li:nth-child(2n-1) {
        background-color: #F4F4F4;
      }
      li:nth-child(2n) {
        background-color: #E8E8E8;
      }
      .more {
        float: right;
      }
    }
  }
}
</style>
